<template>
    <div class="common-layout">
        <el-row>
            <el-button> {{ state.currDate }} </el-button>
        </el-row>
        <el-row>
            <el-select v-model="state.selected" class="m-2" placeholder="Select" 
            @change="change"
            size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
            </el-select>
            <el-text> 数量：{{ state.list_data.length }} </el-text>
            <CopyStocksToClipboard :data="state.list_data"></CopyStocksToClipboard>
        </el-row>

        <el-row>
            <el-col :span="24">
            <el-table :data="state.list_data" height="800" 
            :cell-class-name="tableCellClassName"
            @sort-change="sortChange"
            :default-sort="state.sort"
            @cell-click="cellClick"
            style="width: 100%">
                <el-table-column prop="lowestDate" label="lowestDate" sortable width="210"/>
                <el-table-column prop="stock" label="股票" width="150">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="category" label="类别" width="100"
                    :filter-method="filterCategory"
                    :filters="[
                        { text: '股票', value: '股票' },
                        { text: 'ETF', value: 'ETF' },
                        { text: '指数', value: '指数' },
                    ]"
                />
                <el-table-column prop="industry" label="行业" sortable width="150"/>
                <el-table-column prop="wg" label="吾股" sortable width="100"/>
                <el-table-column prop="close" label="当前价格" width="100"/>
                <el-table-column prop="weekPct" label="周涨跌"  sortable width="100"/>
                <el-table-column prop="lp" label="分位点" sortable width="100"/>
                <el-table-column prop="disPct" label="表现"  sortable width="120" />
                <el-table-column prop="lowestDuration" label="lowestDuration"  sortable width="120" />
            </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import ToStockDetail from './ToStockDetail.vue';
import { getLpClassName } from '../utils/help';
import { getLowStaData } from '../service/week';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';

const selectKey = "WeekUp75DSelect"
const sortPropKey = "WeekUp75DSortProp"
const sortOrderKey = "WeekUp75DSortOrder"

const state = reactive({
    currDate : "",
    list_data : [],
    raw_data: [],
    format_data: [],
    options: [],
    selected: "",
    sort: { 
        prop: sessionStorage.getItem(sortPropKey) || 'lp' , 
        order: sessionStorage.getItem(sortOrderKey) || 'ascending' 
    }

})

getLowStaData().then( res => {

    state.raw_data = res.data

    state.currDate = res.data[0].currentDate

    let optionSet = new Set()
    let data = new Map()

    res.data.forEach(element => {
        optionSet.add(element.lowestDate)
        if (data.has(element.lowestDate)) {
            data.get(element.lowestDate).push(element)
        } else {
            data.set(element.lowestDate, [element])
        }
    });

    state.format_data = data
    state.options = Array.from(optionSet).sort().reverse()

    state.options.unshift("全部")
    state.selected = "全部"
    state.list_data = state.raw_data
})

        const change = () => {
            state.list_data = state.format_data.get(state.selected)
            sessionStorage.setItem(selectKey, state.selected)
        }

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        //单击
        function cellClick(row, column, cell, event) {
            var columnProperty = column.property
            if (columnProperty == "lowestDate") {
                let selected =  row[columnProperty]
                if (state.selected != "全部") {
                    state.selected = "全部"
                    state.list_data = state.raw_data
                } else {
                    state.selected = selected
                    state.list_data = state.format_data.get(state.selected)
                }
            }
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var property = column.property
            if (property == "weekPct") {
                if (row[property] < 0) {
                    return 'lt0-cell'
                }
            }

            if (property == "lp") {
                return getLpClassName(row[property])
            }

            return ''
        }

        const filterCategory = (value, row) => {
            return row.category === value
        }
</script>

<style>
</style>